<template>
<div>
<el-time-select v-model="value" v-bind="elProps" @change="change" />
</div>
</template>

<script setup>
import { ref,watch } from 'vue' 
import { dayjs } from "element-plus";
const props = defineProps({
    elProps:Object,
    modelValue:[String]
})
const value = ref('')
value.value = props.modelValue
watch(()=>props.modelValue,(newval)=>{
value.value = newval
})
const emit = defineEmits(['update:modelValue'])
const change = (v)=>{
        let strs = v.split(':')
        let nowDate = dayjs(new Date()).format('YYYY-MM-DD')
        console.log(strs,nowDate);
        let completeStartDate = dayjs(nowDate).add(parseInt(strs[0]), 'hours').add(parseInt(strs[1]), 'minutes').format('HH:mm')
        console.log(completeStartDate);
        let completeEndDate = dayjs(nowDate).add(parseInt(strs[0]), 'hours').add(parseInt(strs[1]) + parseInt(
          60), 'minutes').format('HH:mm')
          console.log(completeEndDate);
        value.value = `${completeStartDate}-${completeEndDate}`
  emit('update:modelValue',value.value)
}
</script>

<style lang='scss' scoped>

</style>